<!-- 横向布局，标签处于图标下方 -->
<ng-container *ngIf="lvLabelPlacement === 'vertical' && lvDirection === 'horizontal'">
  <ng-container *ngFor="let step of steps; let i = index">
    <!-- 非最后一个图标在这里实例化 -->
    <div *ngIf="i != steps.length - 1" class="lv-wizard-step-label" [style.width]="lvStepLabelWidth">
      <div
        class="lv-wizard-step"
        [style.width]="'auto'"
        [ngClass]="{
          'lv-wizard-step-process': step.status === 'process',
          'lv-wizard-step-finish': step.status === 'finish',
          'lv-wizard-step-error': step.status === 'error'
        }"
      >
        <ng-container *ngTemplateOutlet="lvWizardShape; context: { step: step, index: i }"></ng-container>
        <ng-container *ngTemplateOutlet="lvWizardLine; context: { step: step }"></ng-container>
      </div>
      <ng-container
        *ngTemplateOutlet="
          lvWizardLabel;
          context: { step: step, lvLabelWidth: lvLabelWidth, lvLabelMaxWidth: lvLabelMaxWidth, index: i }
        "
      ></ng-container>
    </div>

    <!-- 最后一个图标特殊实例化 -->
    <div *ngIf="i == steps.length - 1" class="lv-wizard-step-label">
      <div
        class="lv-wizard-step"
        [style.width]="'auto'"
        [ngClass]="{
          'lv-wizard-step-process': step.status === 'process',
          'lv-wizard-step-finish': step.status === 'finish',
          'lv-wizard-step-error': step.status === 'error'
        }"
      >
        <ng-container *ngTemplateOutlet="lvWizardShape; context: { step: step, index: i }"></ng-container>
      </div>
      <ng-container
        *ngTemplateOutlet="
          lvWizardLabel;
          context: { step: step, lvLabelWidth: lvLabelWidth, lvLabelMaxWidth: lvLabelMaxWidth, index: i }
        "
      ></ng-container>
    </div>
  </ng-container>
</ng-container>

<!-- 横向布局，标签处于图标右边 && 纵向布局，标签处于图标右边-->
<ng-container *ngIf="lvLabelPlacement === 'horizontal' || lvDirection === 'vertical'">
  <ng-container *ngFor="let step of steps; let i = index">
    <!-- 非最后一个图标在这里实例化 -->
    <div *ngIf="i != steps.length - 1" class="lv-wizard-step-label" [style.width]="lvStepLabelWidth">
      <div
        class="lv-wizard-step"
        [style.width]="'auto'"
        [ngClass]="{
          'lv-wizard-step-process': step.status === 'process',
          'lv-wizard-step-finish': step.status === 'finish',
          'lv-wizard-step-error': step.status === 'error'
        }"
      >
        <ng-container *ngTemplateOutlet="lvWizardShape; context: { step: step, index: i }"></ng-container>
        <ng-container
          *ngTemplateOutlet="
            lvWizardLabel;
            context: { step: step, lvLabelWidth: lvLabelWidth, lvLabelMaxWidth: lvLabelMaxWidth, index: i }
          "
        ></ng-container>
        <ng-container *ngTemplateOutlet="lvWizardLine; context: { step: step }"></ng-container>
      </div>
    </div>

    <!-- 最后一个图标特殊实例化 -->
    <div *ngIf="i == steps.length - 1" class="lv-wizard-step-label">
      <div
        class="lv-wizard-step"
        [style.width]="'auto'"
        [ngClass]="{
          'lv-wizard-step-process': step.status === 'process',
          'lv-wizard-step-finish': step.status === 'finish',
          'lv-wizard-step-error': step.status === 'error'
        }"
      >
        <ng-container *ngTemplateOutlet="lvWizardShape; context: { step: step, index: i }"></ng-container>
        <ng-container
          *ngTemplateOutlet="
            lvWizardLabel;
            context: { step: step, lvLabelWidth: lvLabelWidth, lvLabelMaxWidth: lvLabelMaxWidth, index: i }
          "
        ></ng-container>
      </div>
    </div>
  </ng-container>
</ng-container>

<!-- 图标抽象模板 -->
<ng-template #lvWizardShape let-step="step" let-i="index">
  <div class="lv-wizard-shape">
    <div
      *ngIf="step.lvIcon || lvType === 'dot'"
      class="lv-wizard-custom-shape"
      (click)="stepClick(i, step)"
      [ngClass]="{ 'lv-wizard-dot-shape': lvType === 'dot' }"
      [style.cursor]="isClickEvent() && !step.lvReadonly ? 'pointer' : 'default'"
    >
      <ng-container *ngIf="step.lvIcon">
        <ng-container *ngTemplateOutlet="step.lvIcon"></ng-container>
      </ng-container>
      <ng-container *ngIf="lvType === 'dot'">
        <ng-container *ngTemplateOutlet="lvStepDot; context: { step: step, index: i }"></ng-container>
      </ng-container>
    </div>
    <ng-container *ngIf="!step.lvIcon && lvType === 'default'">
      <span
        *ngIf="!step.lvIcon && lvMode === 'number'"
        class="lv-wizard-step-number"
        (click)="stepClick(i, step)"
        [style.cursor]="isClickEvent() && !step.lvReadonly ? 'pointer' : 'default'"
        >{{ i + lvStartNumber }}</span
      >
      <span
        *ngIf="lvMode === 'icon'"
        class="lv-wizard-step-icon"
        (click)="stepClick(i, step)"
        [style.cursor]="isClickEvent() && !step.lvReadonly ? 'pointer' : 'default'"
      >
        <em
          *ngIf="!step.status || step.status == 'wait' || step.status == 'process'"
          class="lv-wizard-step-default-icon"
        ></em>
        <ng-container *ngIf="step.status == 'finish'">
          <i lv-icon="lv-icon-steps-success"></i>
        </ng-container>
        <ng-container *ngIf="step.status == 'error'">
          <i lv-icon="lv-icon-steps-error" class="lv-step-error-icon"></i>
        </ng-container>
      </span>
    </ng-container>
  </div>
</ng-template>

<!-- 线条抽象模板 -->
<ng-template #lvWizardLine let-step="step">
  <div
    class="lv-wizard-line"
    [ngClass]="{
      'lv-wizard-line-process': step.nextStatus === 'process',
      'lv-wizard-line-finish': step.nextStatus === 'finish',
      'lv-wizard-line-error': step.nextStatus === 'error',
      'lv-wizard-vertical-line': lvDirection === 'vertical',
      'lv-wizard-dot-line': lvType === 'dot'
    }"
  >
  </div>
</ng-template>

<!-- 标签抽象模型 -->
<ng-template
  #lvWizardLabel
  let-step="step"
  let-lvLabelWidth="lvLabelWidth"
  let-lvLabelMaxWidth="lvLabelMaxWidth"
  let-i="index"
>
  <div
    [ngClass]="{
      'lv-wizard-label': true,
      'lv-wizard-label-readonly': step.lvReadonly,
      'lv-wizard-vertical-label': lvDirection === 'vertical'
    }"
    [style.width]="i == steps.length - 1 ? lastStepWidth : lvLabelWidth"
    [style.maxWidth]="i == steps.length - 1 ? lastStepWidth : lvLabelMaxWidth"
    (click)="stepClick(i, step)"
    [style.cursor]="isClickEvent() && !step.lvReadonly ? 'pointer' : 'default'"
  >
    <div lv-overflow>
      <ng-container [ngTemplateOutlet]="step.label"></ng-container>
    </div>
    <div lv-overflow *ngIf="step.lvDescription" class="lv-wizard-description">
      <ng-container *ngIf="TypeUtils.isRealString(step.lvDescription)"
        ><span>{{ step.lvDescription }}</span></ng-container
      >
      <ng-container *ngIf="TypeUtils.isTemplateRef(step.lvDescription)">
        <ng-container *ngTemplateOutlet="step.lvDescription"></ng-container>
      </ng-container>
    </div>
  </div>
</ng-template>

<!-- dot模板 -->
<ng-template #lvStepDot let-step="step" let-i="index">
  <ng-container *ngIf="i === 0">
    <ng-container *ngTemplateOutlet="lvStepStartDot"></ng-container>
  </ng-container>
  <ng-container *ngIf="i === steps.length - 1">
    <ng-container *ngTemplateOutlet="lvStepEndDot"></ng-container>
  </ng-container>
  <ng-container *ngIf="i !== steps.length - 1 && i !== 0">
    <ng-container *ngTemplateOutlet="lvStepProcessDot"></ng-container>
  </ng-container>
</ng-template>

<!-- dot起始图标 -->
<ng-template #lvStepStartDot>
  <svg viewBox="0 0 17 8" xml:space="preserve" class="lv-wizard-dot-icon lv-wizard-dot-start-icon">
    <path
      d="M17 3.5h-5.8c-1.7 0-3.1-.8-4.2-2.1C6.1.3 4.6-.3 2.9.1 1.5.4.4 1.6 0 3c-.6 2.6 1.4 5 3.9 5 1.2 0 2.2-.5 3-1.3C8 5.4 9.6 4.5 11.3 4.5H17v-1z"
      fillRule="evenodd"
      clipRule="evenodd"
      fill="currentColor"
    />
  </svg>
</ng-template>

<!-- dot结束图标 -->
<ng-template #lvStepEndDot>
  <svg viewBox="0 0 17 8" xml:space="preserve" class="lv-wizard-dot-icon lv-wizard-dot-end-icon">
    <path
      d="M0 3.5h5.8c1.7 0 3.1-.8 4.2-2.1.9-1.1 2.4-1.7 4.1-1.3C15.5.4 16.6 1.6 17 3c.6 2.6-1.4 5-3.9 5-1.2 0-2.2-.5-3-1.3C9 5.4 7.4 4.5 5.7 4.5H0v-1z"
      fillRule="evenodd"
      clipRule="evenodd"
      fill="currentColor"
    />
  </svg>
</ng-template>

<!-- dot中间节点图标 -->
<ng-template #lvStepProcessDot>
  <svg viewBox="0 0 19 8" xml:space="preserve" class="lv-wizard-dot-icon">
    <path
      d="M19 3.5h-2.1c-1.7 0-3.3-.9-4.4-2.2-.7-.8-1.8-1.3-3-1.3s-2.2.5-3 1.3C5.4 2.6 3.8 3.5 2.1 3.5H0v1h2.1c1.7 0 3.3.9 4.4 2.2.7.8 1.8 1.3 3 1.3s2.2-.5 3-1.3c1.1-1.3 2.7-2.2 4.4-2.2H19v-1z"
      fillRule="evenodd"
      clipRule="evenodd"
      fill="currentColor"
    />
  </svg>
</ng-template>
